<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown 文件预览器</title>
    <script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
        }

        .file-input {
            margin-bottom: 20px;
        }

        .preview {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 20px;
            min-height: 300px;
        }

        .preview h1 {
            border-bottom: 1px solid #eee;
        }

        .preview pre {
            background-color: #f8f8f8;
            padding: 10px;
            border-radius: 4px;
            overflow-x: auto;
        }

        .preview code {
            font-family: Consolas, monospace;
        }

        .preview blockquote {
            border-left: 4px solid #ddd;
            padding-left: 10px;
            margin-left: 0;
            color: #666;
        }

        .error {
            color: #e53e3e;
        }

        .warning {
            color: #d97706;
        }
    </style>
</head>

<body>
    <h1>Markdown 文件预览器</h1>

    <div class="file-input">
        <label for="mdFile">选择 Markdown 文件：</label>
        <input type="file" id="mdFile" accept=".md">
    </div>

    <div id="preview" class="preview">
        <p class="text-gray-500">请上传 Markdown 文件 (.md) 以预览内容...</p>
    </div>
    <script src="./mock.js"></script>

    <script>
        // 检查 markdown-it 是否加载成功
        if (typeof window.markdownit !== 'function') {
            document.getElementById('preview').innerHTML = `
        <p class="error">错误：Markdown 解析库加载失败。请检查网络连接或库地址是否正确。</p>
        <p>错误详情：window.markdownit 不是一个函数</p>
      `;
        } else {
            // 初始化 markdown-it 实例（不依赖代码高亮）
            const md = window.markdownit({
                html: true,
                xhtmlOut: true,
                breaks: true,
                linkify: true
            });

            // 获取 DOM 元素
            const fileInput = document.getElementById('mdFile');
            const preview = document.getElementById('preview');


            const renderMdDom = (markdown) => {
                try {
                    console.log(112, markdown)
                    let html = md.render(markdown);
                    preview.innerHTML = html;
                    // 延迟执行以确保 DOM 已渲染
                    setTimeout(() => {
                        document.querySelectorAll('pre code').forEach((block) => {
                            hljs.highlightElement(block);
                        });
                    }, 0);
                } catch (error) {
                    preview.innerHTML = `
              <p class="error">解析 Markdown 时出错：${error.message}</p>
              <pre class="error">${error.stack}</pre>
            `;
                }
            }

            renderMdDom(data)

            // 异步加载代码高亮库
            let highlightAvailable = true;
            // 监听文件选择
            fileInput.addEventListener('change', function (e) {
                const file = e.target.files[0];
                if (!file) return;

                // 检查文件类型
                if (!file.name.endsWith('.md')) {
                    preview.innerHTML = '<p class="text-red-500">请选择 Markdown 文件 (.md)</p>';
                    return;
                }

                // 读取文件内容
                const reader = new FileReader();
                reader.onload = function (event) {
                    renderMdDom(event.target.result)
                };
                reader.readAsText(file);
            });
        }
    </script>
</body>

</html>